<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标悬停的过渡效果（颜色变化，角度变化，渐变的效果）</title>
    <style>
        div{
            width: 300px;
            height: 300px;
        }
        div.a {
            /* 默认从上到下渐变 */
            background-image: linear-gradient(red,yellow,green,orange);
        }
        /* 渐变方向 to top/bottom/left/right*/
        div.b{
            background-image: linear-gradient(to left,red,orange,yellow,green );
        }
        /* 渐变的方向 使用角度 
        deg 角度
        默认向下 180deg 
        上 0deg
        */
        div.c{
            background-image: linear-gradient(45deg,red,orange,yellow,green );
        }
        /* 改变渐变色的大小 */
        div.d{
            background-image: linear-gradient(90deg,red 50%,orange,yellow);
        }
        /*  transition: <property> <duration> <timing-function> <delay>; */
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid;
            background-color: #0000ff;
            transition: width 2s,height 2s,background-color 2s,transform 2s;
        }
        .box:hover{
            width: 200px;
            height: 200px;
            background-color: #ffc;
            transform: rotate(360deg);
            
        }
    </style>
</head>
<body>
    <!-- <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div> -->
    <div class="box"></div>
</body>
</html>